<template>
	<view>
		<view class="page">
		   <comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
		    <view class="body after-navber">
		        <view class="no-content" v-if="data.list.status!=0&&data.list.status!=1&&data.list.status!=2&&data.list.status!=3">暂无记录</view>
		        <block v-if="data.list.status==0">
		            <view class="flex-row" style="padding:64upx 0 0upx 160upx">
		                <image src="../../static/lottery/lottery-go.png" style="display:block;width:88upx;height:88upx"></image>
		                <view class="flex-col flex-x-center" style="color:#ffffff;margin-left:48upx">
		                    <view>参加成功，等待开奖</view>
		                    <view style="height:10upx"></view>
		                    <view style="font-size:9pt">{{data.list.time}}</view>
		                </view>
		            </view>
		            <view class="flex-x-center flex-y-center" style="color:#ffffff;padding:32upx 0upx">您的幸运码为{{data.list.lucky_code}}</view>
		            <view style="background:#ffffff;width:702upx;border-radius:16upx;margin:0 auto;padding:32upx 0">
		                <navigator hoverClass="navigator-hover" style="display:inline" :url="'/lottery/goods/goods?id='+list.lottery_id">
		                    <view class="flex-row" style="padding:0 32upx">
		                        <image class="flex-grow-0" :src="data.list.gift.cover_pic" style="display:block;width:280upx;height:280upx"></image>
		                        <view class="flex-col" style="padding-left:24upx;">
		                            <view class="text-more-2" style="-webkit-line-clamp: 3;font-size:13pt;">{{data.list.gift.name}}</view>
		                            <view style="color:#999999;margin-top:20upx;margin-bottom:30upx">共<text style="color:#ff4544;font-size:26upx;font-weight:bold;padding:0 8upx">{{data.list.lottery.stock}}</text>份</view>
		                            <view class="flex-row flex-y-center">
		                                <view class="flex-grow-0 red">￥0</view>
		                                <view class="flex-grow-1 font-minor" style="text-decoration:line-through;padding-left:12upx">原价￥{{data.list.gift.original_price}}</view>
		                            </view>
		                        </view>
		                    </view>
		                </navigator>
		                <view class="flex-row flex-y-center" style="background:#fff7e7;margin-top:32upx;padding:26upx 32upx">
		                    <view class="flex-col flex-grow-1">
		                        <view class="font-normal" style="font-size:10pt">邀请好友参与，增加中奖概率哦！</view>
		                        <view style="color:#353535;padding-top:10upx">已成功邀请<text class="red"> {{data.list.parent_num}} </text>位好友</view>
		                    </view>
		                    <navigator hoverClass="navigator-hover" style="display:inline" :url="'/lottery/lucky-code/lucky-code?id='+data.list.id">
		                        <view class="flex-grow-0 flex-row flex-y-center">
		                            <view style="font-size:10pt">详情</view>
		                            <image :src="__wxapp_img.dapp.jiantou_r.url" style="width:16upx;height:30upx;margin-left:16upx"></image>
		                        </view>
		                    </navigator>
		                </view>
		                <view class="flex-row flex-x-center" style="padding:0 32upx;margin:40upx 0 64upx 0;">
		                    <navigator class="flex-grow-0" hoverClass="navigator-hover" openType="reLaunch" style="padding-right:32upx" url="/lottery/index/index">
		                        <view class="btn-normal flex-x-center flex-y-center" style="border:1upx solid #ff4544;height:72upx;width:300upx;border-radius:32upx">参与更多抽奖</view>
		                    </navigator>
												<!-- #ifdef MP-WEIXIN -->
												<button class="share-bottom flex-x-center flex-y-center " id="_sum" openType="share">
		                        <view class="btn-main flex-x-center flex-y-center" style="height:72upx;border-radius:32upx;width:300upx">邀请好友参与</view>
		                    </button>
												<!-- #endif -->
		                    <!-- #ifdef H5 -->
		                    <button class="share-bottom flex-x-center flex-y-center " id="_sum" @click="onShareWebMessage">
		                        <view class="btn-main flex-x-center flex-y-center" style="height:72upx;border-radius:32upx;width:300upx">邀请好友参与</view>
		                    </button>
		                    <!-- #endif -->
		                </view>
		                <view style="padding:0 32upx">
		                    <view style="height:1upx;background:#e2e2e2"></view>
		                    <view style="margin:40upx 0 32upx 0;text-align:center">已有{{num}}人参与</view>
		                    <view class="flex " style="flex-wrap:wrap">
		                        <image class="flex-grow-0" :src="aitem.user.avatar_url" style="display:block;width:56upx;height:56upx;margin:0 3upx 20upx 4upx" v-for="(aitem) in data.user_list" :key="aitem.id"></image>
		                    </view>
		                </view>
		                <view style="color:#999999;text-align:center">仅显示最近参与30人</view>
		            </view>
		        </block>
		        <block v-if="data.list.status==1||data.list.status==2||data.list.status==3">
		            <view class="flex-row" style="padding:64upx 0 0upx 160upx">
		                <block v-if="data.list.status==1">
		                    <image src="../../static/lottery/lottery-error.png" style="display:block;width:88upx;height:88upx"></image>
		                    <view class="flex-col flex-x-center" style="color:#ffffff;margin-left:48upx">
		                        <view style="font-size:11pt">很遗憾，您未中奖</view>
		                    </view>
		                </block>
		                <block v-if="data.list.status==2||data.list.status==3">
		                    <image src="../../static/lottery/lottery-success.png" style="display:block;width:88upx;height:88upx"></image>
		                    <view class="flex-col flex-x-center" style="color:#ffffff;margin-left:48upx">
		                        <view style="font-size:11pt">恭喜你，中奖啦！</view>
		                        <view style="font-size:11pt">中奖幸运码为 {{data.list.lucky_code}}</view>
		                    </view>
		                </block>
		            </view>
		            <navigator class="flex-x-center flex-y-center" hoverClass="navigator-hover" style="padding:32upx 0upx" :url="'/lottery/lucky-code/lucky-code?id='+data.list.id">
		                <view style="color:#ffffff;">查看我的幸运码</view>
		                <image src="../../static/lottery/lottery-right.png" style="width:16upx;height:30upx;margin-left:16upx"></image>
		            </navigator>
		            <view style="background:#ffffff;width:702upx;border-radius:16upx;margin:0 auto;padding:32upx">
		                <navigator hoverClass="navigator-hover" style="display:inline" :url="'/lottery/goods/goods?id='+data.list.lottery_id">
		                    <view class="flex-row">
		                        <image class="flex-grow-0" :src="data.list.gift.cover_pic" style="display:block;width:280upx;height:280upx"></image>
		                        <view class="flex-col" style="padding-left:24upx;">
		                            <view class="text-more-2" style="-webkit-line-clamp: 3;font-size:13pt;">{{data.list.gift.name}}</view>
		                            <view style="color:#999999;margin-top:20upx;margin-bottom:30upx">共<text style="color:#ff4544;font-size:13pt;font-weight:bold;padding:0 8upx">{{list.lottery.stock}}</text>份</view>
		                            <view class="flex-row flex-y-center">
		                                <view class="flex-grow-0 red" style="">￥0</view>
		                                <view class="flex-grow-1 font-minor" style="text-decoration:line-through;padding-left:12upx">原价￥{{data.list.gift.original_price}}</view>
		                            </view>
		                        </view>
		                    </view>
		                </navigator>
		                <navigator hoverClass="navigator-hover" openType="reLaunch" style="display:inline" url="/lottery/index/index" v-if="list.status==1">
		                    <view class="flex-row flex-x-center" style="margin:55upx 0 ">
		                        <view class="btn-normal flex-x-center flex-y-center" style="border:1upx solid #ff4544;height:80upx;width:500upx;border-radius:32upx">参与更多抽奖</view>
		                    </view>
		                </navigator>
		                <view class="flex-row flex-x-center" style="margin:64upx 0 " v-if="data.list.status==2||data.list.status==3">
		                    <navigator hoverClass="navigator-hover" openType="reLaunch" style="display:inline" url="/lottery/index/index">
		                        <view class="btn-normal flex-x-center flex-y-center" style="border:1upx solid #ff4544;height:72upx;width:300upx;border-radius:32upx">参与更多抽奖</view>
		                    </navigator>
		                    <view style="width:32upx"></view>
		                    <view @click="submit" class="btn-main flex-x-center flex-y-center" style="height:72upx;border-radius:32upx;width:300upx" v-if="list.status==2">立即兑换</view>
		                    <view class="btn-disabled flex-x-center flex-y-center" style="height:72upx;border-radius:32upx;width:300upx" v-if="list.status==3">已兑换</view>
		                </view>
		                <view style="background:#f7f7f7">
		                    <view style="color:#353535;width:638upx;">
		                        <view class="flex-x-center flex-y-center" style="height:88upx;">已有{{num}}人参与  {{data.list.pe_num}}人中奖</view>
		                        <view style="height:1px;background:#e2e2e2;margin-bottom:32upx"></view>
		                        <view class="flex-row flex-y-center" style="padding-bottom:32upx" v-for="(item,index) in data.user_list" :key="index">
		                            <image class="flex-grow-0" :src="item.user.avatar_url" style="display:block;width:64upx;height:64upx;margin:0 32upx 0 40upx;border-radius:50%"></image>
		                            <view class="flex-grow-1">{{item.user.nickname}}</view>
		                            <view class="flex-col flex-grow-0 flex-y-center" style="margin-right:40upx">
		                                <text>{{item.lucky_code}}</text>
		                                <text class="fs-sm">中奖幸运码</text>
		                            </view>
		                        </view>
		                    </view>
		                    <view @click="userload" style="text-align:center;color:#999999;" v-if="data.list.pe_num>3">加载更多</view>
		                </view>
		            </view>
		        </block>
		    </view>
		    
		</view>
		
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data:{
					 page_num: 1,
					is_loading: !1,
					list:{},
					user_list:{},
					title:""
					
				}
			}
		},
		onLoad: function(t) {myVue = this;
			 var i = this;
		    i.getApp.page.onLoad(this, t);
		    i.getApp.core.showLoading({
		        title: "加载中"
		    }), i.getApp.request({
		        url: i.getApp.api.lottery.detail,
		        data: {
		            id: t.id ? t.id : 0,
		            lottery_id: t.lottery_id ? t.lottery_id : 0,
		            form_id: t.form_id,
		            page_num: 1
		        },
		        success: function(t) {
		            0 == t.code && i.setData(t.data);
		        },
		        complete: function(t) {
		            i.getApp.core.hideLoading();
		        }
		    }), i.getApp.request({
		        url: i.getApp.api.lottery.setting,
		        success: function(t) {
		            if (0 == t.code) {
		                var e = t.data.title;
		                e && (i.getApp.core.setNavigationBarTitle({
		                    title: e
		                }), i.setData({
		                    title: e
		                }));
		            }
		        }
		    });
		},
		
		methods:{
			submit: function(t) {
			    var e = this.data.list.goods_id, i = JSON.parse(this.data.list.attr);
			    e.getApp.core.navigateTo({
			        url: "/pages/order-submit/order-submit?lottery_id=" + this.data.list.id + "&goods_info=" + JSON.stringify({
			            goods_id: e,
			            attr: i,
			            num: 1
			        })
			    });
			},
			userload: function() {
			    var e = this;
			    if (!e.data.is_loading) {
			        e.data;
			        var i = e.data.page_num + 1;
			        e.getApp.core.showLoading({
			            title: "加载中"
			        }), e.getApp.request({
			            url: e.getApp.api.lottery.detail,
			            data: {
			                id: e.data.list.id,
			                page_num: i
			            },
			            success: function(t) {
			                if (0 == t.code) {
			                    if (null == t.data.user_list || 0 == t.data.user_list) return void e.setData({
			                        is_loading: !0
			                    });
			                    e.setData({
			                        user_list: e.data.user_list.concat(t.data.user_list),
			                        page_num: i
			                    });
			                }
			            },
			            complete: function(t) {
			                e.getApp.core.hideLoading();
			            }
			        });
			    }
			},
			onShareWebMessage: function() {
				myVue.getApp.core.hideLoading();
				var t = myVue.getApp.getUser(), e = this.data.list.lottery_id;
				this.$webShare({
					path: "/lottery/goods/goods?user_id=" + t.id + "&id=" + e,
					title: this.data.title ? this.data.title : "抽奖"
				}).then(function() {
					
				})
			}
		},
		onShareAppMessage: function() {
			
		    myVue.getApp.page.onShareAppMessage(this), myVue.getApp.core.hideLoading();
		    var t = myVue.getApp.getUser(), e = this.data.list.lottery_id;
		    return {
		        path: "/lottery/goods/goods?user_id=" + t.id + "&id=" + e,
		        title: this.data.title ? this.data.title : "抽奖"
		    };
		}
	}
</script>

<style scoped>
page {
    background: #ff4544;
}

.lottery-btn {
    color: #ffffff;
    background: #ff4544;
    height: 56upx;
    width: 160upx;
    border-radius: 28upx;
}

.no-content {
    color: #888;
    padding: 100upx 0 0 0;
    text-align: center;
}

button#_sum {
    background: none!important;
    height: auto!important;
    width: 100%!important;
    border: none!important;
    border-radius: 0!important;
    padding: 0!important;
    margin: 0!important;
    line-height: inherit!important;
    font-family: inherit!important;
    color: inherit!important;
    text-align: inherit;
}

button#_sum:before,button#_sum:after {
    border-radius: 0!important;
    border: none!important;
}
</style>
